<template>
    <div>
        <h1>房型列表</h1>
        <div>
            房型名称：<input type="text" v-model="querylist.HName">
            <input type="button" value="查询" class="btn btn-primary" @click="show">
            <input type="button" value="批量删除" class="btn btn-danger" @click="delall">
            <input type="button" value="批量有窗" class="btn btn-info" @click="updates (1)">
            <input type="button" value="批量无窗" class="btn btn-warning" @click="updates(0)">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th><input type="checkbox" v-model="checked" @click="checkall"></th>
                    <th>房型名称</th>
                    <th>房型价格</th>
                    <th>面积</th>
                    <th>最多入住人数</th>
                    <th>房型图片</th>
                    <th>房型描述</th>
                    <th>创建时间</th>
                    <th>是否有窗</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in data.list">
                    <th><input type="checkbox" :value="item.HId" v-model="ids" @change="checkone"></th>
                    <th>{{ item.HName }}</th>
                    <th>{{ item.HPrice.toFixed(2) }}</th>
                    <th>{{ item.HArea }}</th>
                    <th>{{ item.HNumber }}</th>
                    <th><img :src="item.HPhoto" width="100" height="100"></th>
                    <th>{{ item.HDesc }}</th>
                    <th>{{ moment(item.CreateTime).format('YYYY-MM-DD') }}</th>
                    <th>{{ item.IsWin==1?"有窗":"无窗" }}</th>
                    <th>
                        <input type="button" value="修改" class="btn btn-primary" @click="update(item.HId)">
                        <input type="button" value="删除" class="btn btn-danger" @click="delone(item.HId)">
                        <input type="button" :value="item.IsWin==1?'无窗':'有窗'" class="btn btn-warning" @click="upsone(item.HId,item.IsWin==1?'0':'1')">
                    </th>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{data.totalCount}}条</span>
            <span>共{{data.totalPage}}页</span>
            <span>{{querylist.pageindex}}/{{data.totalPage}}</span>
            <input type="button" value="首页" @click="getpage(1)">
            <input type="button" value="上一页" @click="getpage(querylist.pageindex-1)">
            <input type="button" value="下一页" @click="getpage(querylist.pageindex+1)">
            <input type="button" value="尾页" @click="getpage(data.totalPage)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment, { lang } from 'moment';
import { useRoute, useRouter } from 'vue-router';
import { useAdminStare } from '@/stores/admin';
const adc = useAdminStare();
const route = useRoute()
const router = useRouter()


//全选、全不选的变量 控制第一个复选框
let checked=ref(false)
//控住下面的复选框
let ids=ref([])

let querylist:any=reactive({
    pageindex:1,
    pagesize:2,
    HName:""
})

let data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0,
})

onMounted(()=>{
    getist()
})
//全选、全不选
const checkall=()=>{
    checked.value=!checked.value
    if(checked.value==true){
        //将data.list中的id全部都放到ids里
        ids.value=data.list.map((item:any)=>{
            return item.HId
        })
    }
    else{
        ids.value=[]
    }
}

//反选
const checkone=()=>{
    if(ids.value.length==data.list.length){
        checked.value=true
    }
    else{
        checked.value=false
    }
}

const upsone=(HId:any,IsWin:any)=>{
    let f = confirm("确定要修改状态吗？")
    if(f){
        axios({
            url:'/api/House/UpdateHTState',
            method:'put',
            params:{
                ids:HId,
                IsWin:IsWin
            }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0){
                alert("修改成功")
                getist()
            }
            else{
                alert("修改失败")
                return
            }
        })
    }
}


const updates=(IsWin:any)=>{
    if(ids.value.length==0){
        alert("必选选一项")
        return
    }
    let f = confirm("确定要修改吗")
    if(f){
        axios({
            url:'/api/House/UpdateHTState',
            method:'put',
            params:{
                ids:ids.value.toString(),
                IsWin:IsWin
            }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0){
                alert("修改成功")
                checked.value=false
                ids.value=[]
                getist()
            }
            else{
                alert("修改失败")
                checked.value=false
                ids.value=[]
                return
            }
        })
    }
}

const delone=(HId:any)=>{
    let f = confirm("确定要删除吗")
    if(f){
        axios({
            url:'/api/House/DeleteHouseTypes',
            method:'delete',
            params:{
                ids:HId
            }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0){
                alert("删除成功")
                getist()
            }
            else{
                alert("删除失败")
                return
            }
        })
    }
}


//批量删除
const delall=()=>{
    if(ids.value.length==0){
        alert("必选一项")
        return
    }
    let f = confirm("请问你要删除吗")
    if(f){
        axios({
            url:'/api/House/DeleteHouseTypes',
            method:'delete',
            params:{
                ids:ids.value.toString()
            }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0){
                alert("删除成功")
                checked.value=false
                querylist.pageindex=1
                getist()
            }
            else{
                alert("删除失败")
                checked.value=false
                return
            }
        })
    }
}

const update=(HId:any)=>{
    router.push({
        path:"/houseupdate",
        query:{
            HId:HId
        }
    })
}


const show=()=>{
    querylist.pageindex=1
    getist()
}

const getpage=(num:any)=>{
    if(num<1){
        querylist.pageindex=1;
        return
    }
    if(num>data.totalPage){
        querylist.pageindex=data.totalPage
        return
    }
    querylist.pageindex=num
    checked.value=false
    getist()
}


const getist=()=>{
    axios({
        url:'/api/House/GetHouseType',
        method:'get',
        params:querylist
    })
    .then((res)=>{
        console.log(res);
        Object.assign(data,res.data)
    })
}

</script>

<style scoped>
input{
    margin: 0 10px;
}
span{
    margin: 0 10px;
}
</style>